<!--  -->
<template>
  <div class="xzkc">
    <cpn>
      <h1>新增课程</h1>
    </cpn>
    <div class="kcBtn">
      <router-link to="/course" tag="div" class="kcbtn">
        <div role="button">
          <img src="../assets/xzlbt-fh-btn.png" alt />
          <span>返回</span>
        </div>
      </router-link>
    </div>
    <div class="xzkc-content">
      <!-- 提示 -->
      <div class="describe">
        <p>
          <span>请填写课程信息</span>
        </p>
      </div>
      <!-- 课程名称 -->
      <div class="xzkc-name">
        <span>
          课程名称
          <b>*</b> :
        </span>
        <el-input placeholder="请输入课程名称" v-model="input" clearable></el-input>
      </div>
      <!-- 课程图片 -->
      <div class="xzkc-img">
        <span style="position:relative;top:16px;">
          列表图片
          <b>*</b> :
        </span>
        <span class="sctp">上传图片</span>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
        <p>建议尺寸为768*500像素，大小小于2M</p>
      </div>
      <!-- 课程费用 -->
      <div class="xzkc-state">
        <span>
          课程上架
          <b>*</b> :
        </span>
        <el-switch v-model="value" active-color="#13ce66" inactive-color="#e4e4e4"></el-switch>
      </div>
      <!-- 课程费用 -->
      <div class="xzkc-kcf">
        <span>
          课程费
          <b>*</b> :
        </span>
        <span class="s2">￥</span>
        <el-input placeholder="(元)" v-model="input2" clearable></el-input>
      </div>
      <!-- 赠送积分 -->
      <div class="xzkc-zsjf">
        <span style="  position: relative;top: 10px;">赠送积分:</span>
        <el-input placeholder="10" v-model="input3" clearable></el-input>
        <p style="  position: relative;top: 10px;left:10px;">购买该课程时赠送的积分，100积分抵扣1元</p>
      </div>
      <!-- 课程推荐首页-->
      <div class="xzkc-tjsy">
        <span>
          是否推荐到首页
          <b>*</b> :
        </span>
        <el-select v-model="tjVal" placeholder="是">
          <el-option
            v-for="item in options"
            :key="item.tjVal"
            :label="item.label"
            :value="item.tjVal"
          ></el-option>
        </el-select>
      </div>
      <!-- 课程时间 -->
      <div class="xzkc-time">
        <span style="  position: relative;top: 10px;">
          上传时间
          <b>*</b> :
        </span>
        <div class="block">
          <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
        </div>
      </div>
      <!-- 课程价格 -->
      <div class="xzkc-kcjg">
        <span>课程价格 :</span>
        <span class="s2">￥</span>
        <el-input placeholder="(元)" v-model="input2" clearable></el-input>
      </div>
      <!-- 排序号 -->
      <div class="xzkc-pxh">
        <span style="  position: relative;top: 10px;">排序号:</span>
        <el-input placeholder="0" v-model="input3" clearable></el-input>
        <p style="  position: relative;top: 10px;left:10px;">请填写数字，数字越大越靠前</p>
      </div>
      <!-- 课程简介 -->
      <div class="xzkc-kcjj">
        <span style="  position: relative;top: 10px;">课程简介:</span>
        <el-input
          type="textarea" id="kcjj" style="width:800px;"
          :autosize="{ minRows: 8, maxRows: 16}"
          placeholder="请输入内容"
          v-model="textarea2"
        ></el-input>
      </div>
      <!-- 师资设置 -->
      <div class="xzkc-szsj">
         <span style="  position: relative;top: 10px;">师资设置:</span>
        <el-input
          type="textarea" id="szsj" style="width:800px;"
          :autosize="{ minRows: 8, maxRows: 16}"
          placeholder="请输入内容"
          v-model="textarea"
        ></el-input>
      </div>
      <!-- 课程设置 -->
      <div class="xzkc-sz">
        <span style="  position: relative;top: 10px;">师资设置:</span>
         <el-button type="primary" icon="el-icon-plus">新增大章节</el-button>
      </div>
      <!-- 课程按钮 -->
      <div class="xzkc-bottom-btn">
        <div class="xzkc-bottom-btn-son">
          <div role="button" class="baocun">
            <img src="../assets/xzlbt-btn1.png" alt />
            <span>保存</span>
          </div>
          <div role="button" class="quxiao">
            <img src="../assets/xzlbt-btn2.png" alt />
            <span>取消</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cpn from "../components/biaoti";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    cpn,
  },
  data() {
    //这里存放数据
    return {
      input: "",
      input2: "",
      input3: "",
      value: true,
      dialogImageUrl: "",
      dialogVisible: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      options: [
        {
          tjVal: "选项1",
          label: "是",
        },
        {
          tjVal: "选项2",
          label: "否",
        },
      ],
      tjVal: "",
      textarea2: '',
      textarea: '',
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style  scoped>
.xzkc {
  position: relative;
}
.kcBtn {
  position: absolute;
  right: 132px;
  top: 20px;
}
.kcbtn {
  position: relative;
  width: 80px;
  height: 34px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(145, 55, 243, 1);
  border-radius: 4px;
  box-shadow: none;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  font-size: 12px;
  color: #9137f3;
  cursor: pointer;
}
.kcbtn img {
  position: absolute;
  top: 9px;
  left: 18px;
}
.kcbtn span {
  position: absolute;
  top: 7px;
  right: 10px;
}
/* 返回按钮结束 */
/* 内容部分开始 */
.xzkc-content {
  width: 1100px;
  height: 1509px;
  border: 1px solid rgb(228, 228, 228);
  margin: 0 auto;
}
/* 描述 */
.describe {
  font-size: 14px;
  color: #999;
  font-weight: 400;
  font-family: "思源黑体";
  width: 1000px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  border-bottom: 1px solid rgb(228, 228, 228);
}
/* 课程名字 */
.xzkc-name {
  padding: 32px 0px 32px 70px;
}
.xzkc-name span {
  color: #333;
  font-size: 14px;
}
.xzkc-name span b {
  text-decoration: none;
  color: red;
}
.xzkc-name .el-input {
  width: 185px;
  height: 37px;
  font-size: 13px;
  color: rgb(153, 153, 153);
  margin-left: 20px;
}
/* 课程图片 */
.xzkc-img {
  padding: 20px 0 20px 75px;
  display: flex;
  position: relative;
}

.xzkc-img span {
  color: #333;
  font-size: 14px;
}
.xzkc-img span b {
  text-decoration: none;
  color: red;
}
.xzkc-img .sctp {
  display: block;
  width: 48px;
  height: 16px;
  font-size: 12px;
  color: #999;
  position: absolute;
  bottom: 30px;
  left: 184px;
  font-weight: 400;
  z-index: 10;
  font-weight: 400;
  cursor: pointer;
}
.xzkc-img p {
  font-size: 12px;
  color: #999;
  height: 16px;
  position: absolute;
  bottom: -6px;
  left: 170px;
}
/* 课程状态 */
.xzkc-state {
  padding: 50px 0 20px 72px;
}
.xzkc-state span {
  color: #333;
  font-size: 14px;
}
.xzkc-state span b {
  text-decoration: none;
  color: red;
}
.xzkc-state .el-switch {
  margin-left: 20px;
  width: 55px;
  height: 26px;
}
/* 课程费 */
.xzkc-kcf {
  padding: 20px 0 20px 88px;
  position: relative;
}
.xzkc-kcf span {
  color: #333;
  font-size: 14px;
}
.xzkc-kcf span b {
  text-decoration: none;
  color: red;
}
.xzkc-kcf .s2 {
  display: block;
  width: 24px;
  height: 39px;
  text-align: center;
  line-height: 39px;
  position: absolute;
  left: 172px;
  top: 20px;
  background: inherit;
  background-color: #dcdfe6;
  opacity: 0.6;
  border: none;
  z-index: 10;
  border-color: #dcdfe6;
  border-radius: 3px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
/* 赠送积分 */
.xzkc-zsjf {
  padding: 16px 0 20px 94px;
  display: flex;
}
.xzkc-zsjf span {
  color: #333;
  font-size: 14px;
}
.xzkc-zsjf p {
  font-size: 12px;
  color: #999;
}
.xzkc-zsjf .el-input {
  width: 185px;
  height: 37px;
  margin-left: 20px;
}
/* 课程推荐 */
.xzkc-tjsy {
  padding: 16px 0 20px 33px;
  position: relative;
}
.xzkc-tjsy span {
  color: #333;
  font-size: 14px;
}
.xzkc-tjsy span b {
  text-decoration: none;
  color: red;
}
/* 课程价格*/
.xzkc-kcjg {
  padding: 16px 0 20px 92px;
  position: relative;
}
.xzkc-kcjg span {
  color: #333;
  font-size: 14px;
}
.xzkc-kcjg span b {
  text-decoration: none;
  color: red;
}
.xzkc-kcjg .s2 {
  display: block;
  width: 24px;
  height: 38px;
  text-align: center;
  line-height: 38px;
  position: absolute;
  left: 176px;
  top: 17px;
  background: inherit;
  background-color: #dcdfe6;
  opacity: 0.6;
  border: none;
  z-index: 10;
  border-color: #dcdfe6;
  border-radius: 3px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
/* 课程时间 */
.xzkc-time {
  padding: 16px 0 16px 80px;
  display: flex;
}
.xzkc-time span {
  color: #333;
  font-size: 14px;
}
.xzkc-time span b {
  text-decoration: none;
  color: red;
}
.xzkc-time .block {
  margin-left: 20px;
}
/* 课程排序号*/
.xzkc-pxh {
  padding: 20px 0 20px 110px;
  display: flex;
}
.xzkc-pxh span {
  color: #333;
  font-size: 14px;
}
.xzkc-pxh p {
  font-size: 12px;
  color: #999;
}
.xzkc-pxh .el-input {
  width: 185px;
  height: 37px;
  margin-left: 20px;
}
/* 课程简介 */
.xzkc-kcjj{
  padding: 20px 0 10px 110px;
  display: flex;
}
.xzkc-kcjj span {
  width: 70px;
  color: #333;
  font-size: 14px;
}
/* 师资设置 */
.xzkc-szsj{
  padding: 20px 0 10px 110px;
  display: flex;
 
}
.xzkc-szsj span {
  width: 70px;
  color: #333;
  font-size: 14px;
}
/* 课程设置 */
.xzkc-sz{
  padding: 20px 0 80px 110px;
  display: flex;
   position: relative;
}
.xzkc-sz span {
  width: 70px;
  color: #333;
  font-size: 14px;
}
/* 课程按钮 */
.xzkc-bottom-btn {
  position: relative;
  padding: 60px 0;
}
.xzkc-bottom-btn-son {
  display: flex;
  position: absolute;
  left: 42%;
}
.xzkc-bottom-btn .baocun {
  width: 96px;
  height: 36px;
  background-color: #9137f3;
  border-radius: 3px;
  box-shadow: none;
  position: relative;
  cursor: pointer;
  margin-right: 18px;
}
.xzkc-bottom-btn .baocun img {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 26px;
  top: 10px;
}
.xzkc-bottom-btn .baocun span {
  font-size: 13px;
  color: #fff;
  position: absolute;
  right: 20px;
  top: 10px;
}
.xzkc-bottom-btn .quxiao {
  width: 96px;
  height: 36px;
  background-color: rgba(153, 153, 153, 0.2666667);
  border-radius: 3px;
  box-shadow: none;
  position: relative;
  margin-left: 18px;
  cursor: pointer;
}
.xzkc-bottom-btn .quxiao img {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 26px;
  top: 10px;
}
.xzkc-bottom-btn .quxiao span {
  font-size: 13px;
  color: #666;
  position: absolute;
  right: 20px;
  top: 10px;
}
.xzkc-bottom-btn .baocun:hover {
  opacity: 0.8;
}
.xzkc-bottom-btn .quxiao:hover {
  opacity: 0.8;
}
</style>

<style>
/* 公共样式 */
/* 课程图片 */
.xzkc-img .el-upload {
  width: 73px;
  height: 73px;
  position: relative;
  margin-left: 20px;
}
.xzkc-img .el-upload--picture-card i {
  font-size: 20px;
  font-weight: bolder;
  color: #8c939d;
  position: absolute;
  top: 15px;
  left: 25px;
}
/* 新增课程 */
.xzkc-kcjg .el-input {
  width: 161px;
  height: 37px;
  position: relative;
  margin-left: 20px;
  border-left: none;
  /* padding-left: 39px; */
}
.xzkc-kcjg .el-input__inner {
  padding: 0 0 0 30px;
}
.xzkc-kcf .el-input {
  width: 161px;
  height: 37px;
  position: relative;
  margin-left: 20px;
  border-left: none;
  /* padding-left: 39px; */
}
.xzkc-kcf .el-input__inner {
  padding: 0 0 0 30px;
}
/* 首页推荐 */
.xzkc-tjsy .el-select {
  width: 184px;
  height: 37px;
  margin-left: 20px;
}
/* 课程简介 */
.xzkc-jj #kcjj{
  width: 605px;
  margin-left: 20px;
}
.xzkc-jj #szsj{
  width: 605px;
  margin-left: 20px;
}
/* 课程设置 */
.xzkc-sz .el-button--primary {
  background-color: #ff9900;  
  border-color: #ff9900;
  color: #fff;
  position: absolute;
  top: 60px;
  left: 510px;
}
.xzkc-sz .el-icon-plus{
  font-size: 18px;
} 
</style>